<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>退宿管理</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>

    <link rel="stylesheet" href="/dangxia/css/font.css">
    <link rel="stylesheet" href="/dangxia/css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="/dangxia/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/dangxia/js/xadmin.js"></script>
</head>

<body>
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">演示</a>
        <a>
          <cite>导航元素</cite></a>
      </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body">
    <div class="layui-inline">
        <label class="layui-form-label"><span class="x-red">*</span>手机号</label>
        <div class="layui-input-inline">
            <input id="myphone" type="tel" name="phone" lay-verify="myphone" placeholder="请输入手机号"
                   autocomplete="off"
                   class="layui-input">
        </div>

    </div>
    <span id="myphonetip" style="color: red;display: none">手机号格式不正确</span>
    <div class="layui-input-inline">
        <button id="mybtn" class="layui-btn" lay-submit lay-filter="demo1">立即提交</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>

    </div>
    <div class="layui-input-inline" style="float: right">
        <button id="myhistorybtn" class="layui-btn"><i class="layui-icon">&#xe66e;</i>退宿记录</button>
    </div>


</div>

<div id="mygiveout"
     style="margin: 50px auto;background: url(/dangxia/images/tip.jpg) center center no-repeat;width: 620px;height: 400px;padding-top: 50px;display: none">

    <input class="layui-input-block layui-input" id="showdiffdate" type="text" disabled
           style="width: 400px;border: none;margin-top: 100px;background-color: #EDDF64"/><br/><br/>
    <input class="layui-input-block layui-input" id="showdeposit" type="text" disabled
           style="width: 400px;border: none;background-color: #EDDF64"/>
    <input class="layui-input-block layui-input" id="sh" type="text" disabled
           style="width: 400px;border: none;background-color: #EDDF64;margin-top: 30px"/>
</div>

<script type="text/html" id="titleTpl">
    {{# if(d.payType==0){ }}
    按月缴费
    {{# }else{ }}
    免租入住
    {{#  } }}
</script>
<script type="text/html" id="myTpl">
    {{# if(d.overdue>0){ }}
    早退{{= d.overdue }}天
    {{# }else if(d.overdue==0){ }}
    逾期{{ d.overdue }}天
    {{# }else{ }}
    逾期{{= d.overdue }}天
    {{# } }}
</script>
<script>
    layui.use(['table', 'layer', 'laytpl', 'form', 'laydate'], function () {

        var layer = layui.layer;
        var form = layui.form;
        var laytpl = layui.laytpl;
        var table = layui.table;
        var laydate = layui.laydate;
        //点击input框事件
        $("#myphone").click(function () {
            $("#myphonetip").css("display", "none");
        });

        $("#mybtn").click(function () {

            var myphone = $("#myphone").val();
            if (myphone.length >= 0) {
                if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(myphone)) {
                    $("#myphonetip").css("display", "inline-block");
                } else {
                    //发送请求获取退宿的个人信息
                    $.post("/dangxia/checkout/getMsgByPhone", {
                        phone: myphone
                    }, function (data) {

                        $("#atest1").val(data.data.name);
                        $("#atest2").val(data.data.userAddr);
                        if(data.data.userSex==1){
                            $("#atest3").val("男");
                        }else{
                            $("#atest3").val("女");
                        }
                        $("#atest4").val(data.data.userCard);
                        $("#atest5").val(data.data.payphone);
                        $("#atest6").val(data.data.roomNo);
                        $("#atest7").val(data.data.bedNum);
                        $("#atest8").val(data.data.deposit);
                        if(data.data.payType==1){
                            $("#atest9").val("免租");
                        }else{
                            $("#atest9").val("按月交租");
                        }
                        $("#atest10").val(data.data.endTime);
                    });

                    layer.open({
                        type: 1,
                        title: '办理退宿',
                        area: ['500px', '700px'],
                        btn: ['确认办理']
                        , yes: function (index, layero) {
                            var cload = layer.load(1,{
                                shade:[0.3,'#000'],
                                time:5000
                            });
                            $.post("/dangxia/checkout/updateUser", {
                                phone: myphone
                            }, function (data) {
                                if (data.code == 0) {
                                    $("#mygiveout").css('display', 'block');
                                    var diffdate = Number(data.data.diffdate);
                                    console.log(diffdate);
                                    var deposit = Number(data.data.deposit);
                                    layer.close(cload);
                                    layer.msg(data.msg, {
                                        time: 2000, icon: 6
                                    });
                                    if (diffdate >= 0) {
                                        $("#showdiffdate").val("应该退" + diffdate + "天住宿费");
                                    } else {
                                        var diffdate = -diffdate;
                                        $("#showdiffdate").val("应该补缴" + diffdate + "天住宿费");
                                    }
                                    $("#showdeposit").val("应该退" + deposit + "元押金费");
                                } else if (data.code == 2) {
                                    layer.close(cload);
                                    layer.msg(data.msg, {
                                        time: 2000, icon: 5
                                    });
                                } else {
                                    layer.close(cload);
                                    layer.msg(data.msg, {
                                        time: 2000, icon: 5
                                    });
                                }
                            });
                            layer.close(index);
                        },
                        closeBtn: 1
                        , content: $('#showuser')

                    });


                }
            }
        });


        $("#myhistorybtn").click(function () {
            layer.open({
                title: "历史记录",
                type: 1,
                content: $('#myhistoryHH'), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                area: ['1000px', '600px'],
                end: function () {
                    location.reload();
                }
            });

            //第一个实例
            table.render({
                elem: '#myhistory'
                , height: 412
                , url: '/dangxia/checkout/getAllHistory' //数据接口
                ,initSort: {
                    field: 'retireTime' //排序字段，对应 cols 设定的各字段名
                    ,type: 'desc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
                }
                , page: true //开启分页
                , limits: [5, 10, 20, 30]
                , limit: 5
                , cols: [
                    [ //表头
                        {field: 'name', title: '姓名',fixed: 'left'}
                        , {field: 'phone', title: '手机号'}
                        , {field: 'payType', title: '支付方式', templet: '#titleTpl'}
                        , {field: 'deposit', title: '支付押金'}
                        , {field: 'endTime', title: '到期时间'}
                        , {field: 'retireTime', title: '退宿时间', sort: true}
                        , {field: 'overdue', title: '相差天数', templet: '#myTpl'}
                        , {field: 'createMan', title: '操作人'}
                    ]
                ]

            });


        });

    });
</script>


</body>

<!--历史记录弹框内容-->
<div id="myhistoryHH" style="display: none">
    <table id="myhistory"></table>
</div>

<div id="showuser" style="display:none">
    <form class="layui-form" lay-verify="myform">
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="x-red">*</span>姓名</label>
            <div class="layui-input-inline">
                <input id="atest1" type="text" autocomplete="off"
                       class="layui-input" disabled>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="x-red">*</span>地址</label>
            <div class="layui-input-inline">
                <input id="atest2" type="text" autocomplete="off"
                       class="layui-input" disabled>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-inline">
                <input id="atest3" type="text" autocomplete="off"
                       class="layui-input" disabled>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="x-red">*</span>身份证</label>
            <div class="layui-input-inline">
                <input id="atest4" type="text" autocomplete="off"
                       class="layui-input" disabled>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">支付宝账号</label>
            <div class="layui-input-inline">
                <input id="atest5" type="text" autocomplete="off"
                       class="layui-input" disabled>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">房间号</label>
            <div class="layui-input-inline">
                <input id="atest6" type="text" autocomplete="off"
                       class="layui-input" disabled>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">床位号</label>
            <div class="layui-input-inline">
                <input id="atest7" type="text" autocomplete="off"
                       class="layui-input" disabled>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">住房押金</label>
            <div class="layui-input-inline">
                <input id="atest8" type="text" autocomplete="off"
                       class="layui-input" disabled>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">交租方式</label>
            <div class="layui-input-inline">
                <input id="atest9" type="text" autocomplete="off"
                       class="layui-input" disabled>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">到期时间</label>
            <div class="layui-input-inline">
                <input id="atest10" type="text" autocomplete="off"
                       class="layui-input" disabled>
            </div>
        </div>
    </form>

</div>

</html>